@charset "utf-8";
/* CSS Document */


/*------------------------------------------------start  banner1-----------------------------------------------------*/

/*1-全屏banner，显示三张，一张一张左右滑动*/
.clearfix:before, .clearfix:after { content: '.'; display: block; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0; width: 0; height: 0; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
.icon-arrow-a-left, .icon-arrow-a-right { /*background: url(../images/icon-sd26986d847.png) no-repeat;*/ }
.icon-arrow-a-left { background:url(../images/prev.png) no-repeat;height: 51px; width: 53px; }
.icon-arrow-a-left:hover, .icon-arrow-a-left.arrow-a-left_hover, .icon-arrow-a-left.arrow-a-left-hover { background:url(../images/prev.png) no-repeat; }
.icon-arrow-a-right {background:url(../images/next.png) no-repeat;  height: 51px; width: 53px; }
.icon-arrow-a-right:hover, .icon-arrow-a-right.arrow-a-right_hover, .icon-arrow-a-right.arrow-a-right-hover {background:url(../images/next.png) no-repeat;  }
a { color: #262626; text-decoration: none; }
a:hover { color: #FF4503; text-decoration: underline; }
#main {overflow: hidden; zoom: 1; position: relative; }
#index_b_hero { width: 1200px; height:532px;margin: auto; position: relative; }
#index_b_hero img { width: 1200px; height:532px; }
#index_b_hero .heros { width: 1200px;height:532px;}
#index_b_hero .hero-wrap { overflow: visible; position: absolute; }
#index_b_hero .next, #index_b_hero .prev {  position: absolute; top: 50%; z-index:100;  margin-top: -25px; margin-left: -68px;  }
#index_b_hero .next:hover, #index_b_hero .prev:hover { }
#index_b_hero .next { margin: -25px -68px 0 0; right: 0; }
#index_b_hero .disabled { background-color: #eee; }
#index_b_hero .mask-left, #index_b_hero .mask-right, #index_b_hero .hero { background: #fff;/* padding: 5px; */z-index: 1; position: absolute; top: 0; left: 0; width: 1200px; height:532px; overflow: hidden; left: 1920px; }
#index_b_hero .mask-right, #index_b_hero .mask-left { z-index: 4; left: -1200px; background:url(../images/zz_01.png) repeat; overflow: hidden; }
#index_b_hero .mask-right { left: 1200px; }
#index_b_hero .active { z-index: 2; left: 0; }
/*
<div id="main">
         <div id="index_b_hero">
             <div class="hero-wrap">
                 <ul class="heros clearfix">
                     <li class="hero">
                           <a href="" target="_blank" title="">
                             <img src="images/banner1.jpg" class="thumb" alt="" />
                            </a>
                     </li>
                     <li class="hero">
                           <a href="" target="_blank" title="">
                             <img src="images/banner2.jpg" class="thumb" alt="" />
                           </a>
                     </li>
                     <li class="hero">
                          <a href="" target="_blank" title="">
                            <img src="images/banner1.jpg" class="thumb" alt="" />
                          </a>
                     </li>
                     <li class="hero">
                          <a href="" target="_blank" title="">
                            <img src="images/banner2.jpg" class="thumb" alt="" />
                     </a>
                    </li>
                </ul>
            </div>
        <div class="helper">
        <div class="mask-left"></div>
         <div class="mask-right"></div>
         <a href="#" class="prev icon-arrow-a-left"></a>
         <a href="#" class="next icon-arrow-a-right"></a>
      </div>
   </div>
 </div>
 <script src="change_js/jquery.foucs.js" type="text/javascript"></script>
 <script type="text/javascript">
   $.foucs({ direction: 'right' });
 </script>
*/
/*------------------------------------------------end  banner2-----------------------------------------------------*/


/*------------------------------------------------start  banner2-----------------------------------------------------*/

/*2-淡入淡出效果*/
.changeBox_a1{width:1920px;height:480px;position:relative;overflow:hidden;}
.changeBox_a1 .a_bigImg{position:absolute;display:none; width:1920px; height:480px;}
.a_bigImg img{width:1920px; height:480px;}
.ul_change_a2{position:absolute; margin-left:46%; bottom:21px; width:54%; height:16px;overflow:hidden;  }
.ul_change_a2 li{display: -moz-inline-stack;display:inline-block;*display:inline;*zoom:1; width:27px; height:16px;float:left; position:relative;}
.ul_change_a2 span{display: -moz-inline-stack;display:inline-block; float:left;*display:inline;*zoom:1;cursor:hand;cursor:pointer;  width:16px; height:16px; color:#fff; /*background-color:#fff;*/text-align:center; text-align:center;  color:#fff; line-height:7px;overflow:hidden;}
.ul_change_a2 span.on{ width:16px; height:16px; color:#fff; text-decoration:none; display:inline-block;/* background-color:#01458e;*/}
/*
<div class="changeBox_a1" id="change_3">
      <a href="#1" class="a_bigImg"><img src="images/banner1.png" /></a> 
      <a href="#2" class="a_bigImg"><img src="images/banner2.jpg"/></a>
       <ul class="ul_change_a2">
        <li><span></span></li>
        <li><span></span></li>
       </ul>
	   <script type="text/javascript" src="change_js/jquery.soChange.js"></script>
		<script type="text/javascript">
		   $(function(){
			$('#change_3 .a_bigImg').soChange({
				 thumbObj:'#change_3 .ul_change_a2 span',
				 thumbNowClass:'on',//自定义导航对象当前class为on
				 changeTime:4000//自定义切换时间为4000ms
			});
			})
		 </script>
 </div>
*/
/*------------------------------------------------end  banner2-----------------------------------------------------*/


/*------------------------------------------------start Effect3-----------------------------------------------------*/

/*3-无缝从左往右滚动*/
#demo {overflow:hidden;}
#indemo {float: left;width: 8000%; }
#demo1 {float: left;}
#demo2 {float: left;}
.newc{ float:left;width:405px; height:276px; overflow:hidden;}
.newc .a_img{width:385px; height:240px; display:inline-block; overflow:hidden;}
.newc .a_img img{width:385px; height:240px;}
.newc .a_text{width:385px; height:36px; line-height:36px; display:inline-block; overflow:hidden; color:#333333; font-size:16px; font-weight:bold;}
.newc .a_text:hover{ text-decoration:none; color:#d81920;}

/*
<div class="cx_content1" id="demo">
              <div  id="indemo">
                <div id="demo1">
                  <div class="newc">
                      <a href="" target="_blank"><img src="images/pic_01.jpg" /></a>
                  </div>
                  <div class="newc">
                     <a href="" target="_blank"><img src="images/pic_01.jpg" /></a>
                  </div>
                  <div class="newc">
                     <a href="" target="_blank"><img src="images/pic_01.jpg" /></a>
                  </div>
                  <div class="newc">
                     <a href="" target="_blank"><img src="images/pic_01.jpg" /></a>
                  </div>
                  <div class="newc">
                     <a href="" target="_blank"><img src="images/pic_01.jpg" /></a>
                  </div>
                </div>
                <div id="demo2"><!--这个div不能删除 -->
                  <div class="newc"><a href="" target="_blank"></a></div>
                  <div class="newc"><a href="" target="_blank"></a></div>
                  <div class="newc"><a href="" target="_blank"></a></div>
                  <div class="newc"><a href="" target="_blank"></a></div>
                  <div class="newc"><a href="" target="_blank"></a></div>
                </div>
              </div>
              </div>
 <script language=JavaScript src="change_js/rolling.js"></script>
*/


#demoz {overflow:hidden;}
#indemoz {float: left;width: 8000%; }
#demo1z {float: left;}
#demo2z {float: left;}
.newcz{ float:left;width:247px; height:158px; overflow:hidden;}
.newcz a img{width:236px; height:156px; border:1px solid #000000;}


#democ {overflow:hidden;}
#indemoc {float: left;width: 8000%; }
#demo1c {float: left;}
#demo2c {float: left;}
.newcc{ float:left;width:255px; height:280px; overflow:hidden;}
.newcc .a_img{width:236px; height:280px; display:inline-block; position:relative; overflow:hidden;}
.newcc .a_img .img{ width:236px; height:280px;}
.newcc .a_img .text{width:236px; height:177px; background:url(../images/bg_bac.png) repeat; position:absolute; left:0px; top:0px; padding-top:103px; display:none;}
.newcc .a_img .text_t{width:236px; height:36px; line-height:36px; color:#fff; overflow:hidden; text-align:center; font-size:16px;}
.newcc .a_img .text_c1{width:236px; height:23px; padding:6px 0px 0px 0px; text-align:center; }
.newcc .a_img:hover .text{ display:block;}


#demoz1 {overflow:hidden;}
#indemoz1 {float: left;width: 8000%; }
#demo1z1 {float: left;}
#demo2z1 {float: left;}
.newcz1{ float:left;width:257px; height:178px;}
.newcz1 a img{ width:232px; height:171px;}
.newcz1 .text{width:232px; height:48px; line-height:24px; color:#555555; font-family:"微软雅黑";}
.newcz1:hover a img{width:228px; height:167px; border:2px solid #da363f;}
.newcz1:hover .text{ color:#da363f;}



#demoz2 {overflow:hidden;}
#indemoz2 {float: left;width: 8000%; height:362px; }
#demo1z2 {float: left; width:1000px; height:362px;}
#demo2z2 {float: left;width:1000px; height:362px;}
.newcz2{ float:left;width:250px; height:181px; position:relative;}
.newcz2 a img{ width:231px; height:159px;border:1px solid #ff8789; padding:2px;}
.newcz2 .text,.newcz2 .text:hover{width:231px; height:31px; background:url(../images/bg_032.png) repeat; line-height:31px; color:#ffffff; font-weight:bold; text-decoration:none; position:absolute; left:3px;bottom:19px; text-align:center; display:none;}
.newcz2:hover .text{ display:block;}

/*------------------------------------------------end Effect3-----------------------------------------------------*/

/*------------------------------------------------start Effect4-----------------------------------------------------*/
/*4-从下往上无缝滚动*/
.scrolltop1{width:183px;height:500px;overflow:hidden;margin:22px 0px 9px 20px;}
.scrolltop1 li{width:163px; height:171px;overflow:hidden;}
.scrolltop1 img{width:161px; height:158px; border:1px solid #c7c7c7;}
/*
<div class="scrolltop1">
    <ul>
       <li>
           <a href=""><img alt="" src="images/kh_01.jpg"/></a>
       </li>
       <li>
           <a href=""><img alt="" src="images/kh_01.jpg"/></a>
       </li>
       <li>
           <a href=""><img alt="" src="images/kh_01.jpg"/></a>
       </li>
       <li>
            <a href=""><img alt="" src="images/kh_01.jpg"/></a>
       </li>
        <li>
            <a href=""><img alt="" src="images/kh_01.jpg"/></a>
        </li>
       <li>
            <a href=""><img alt="" src="images/kh_01.jpg"/></a>
        </li>
    </ul>
</div>
<script type="text/javascript" src="change_js/slider.js"></script>
 <script type="text/javascript">
	$(document).ready(function(){
	$(".scrolltop1").imgscroll({
		speed: 40,    //图片滚动速度
		amount: 0,    //图片滚动过渡时间
		width: 1,     //图片滚动步数
		dir: "up"   // "left" 或 "up" 向左或向上滚动
	});
						
	});
</script> 
*/

/*------------------------------------------------end Effect4-----------------------------------------------------*/

/*------------------------------------------------start Effect5-----------------------------------------------------*/

/*5-左右按钮切换*/
.abtn{position:absolute;bottom:0px;display:block;height:36px;overflow:hidden;text-indent:-20000px;/*background:url(images/arrow3.gif) 0px center no-repeat;*/}
.aleft{width:87px; left:41%;/*background:url(../images/l_btn.png) left center no-repeat;*/}
.agrayleft{cursor:default;/*background:url(../images/l_btn.png) left center no-repeat;*/}
.aright{width:84px;right:42%;/* background:url(../images/r_btn.png) left center no-repeat;*/}
.agrayright{cursor:default;/*background:url(../images/r_btn.png) left center no-repeat;*/}
.productshow{width:1000px;height:275px;position:relative; margin:0px auto; }
.productshow .scrollcontainer{width:1000px;height:275px;overflow:hidden;position:relative; margin:0px auto;}
.productshow .scrollcontainer ul{width:20000px;position:absolute;}
.productshow .scrollcontainer ul li{width:314px;height:240px; padding-left:16px; float:left;}
.productshow .scrollcontainer ul li .a_img{width:293px; height:192px; display:inline-block; border:6px solid #d4effb; overflow:hidden; position:relative;}
.productshow .scrollcontainer ul li .a_img img{width:293px; height:192px;}
.productshow .scrollcontainer ul li .a_img .text{width:293px; height:87px; line-height:1.0em; display:none; font-size:14px; font-family:"微软雅黑"; background:url(../images/zz_001.png) no-repeat; position:absolute; left:0px; top:0px; padding-top:105px; color:#fff;}
.productshow .scrollcontainer ul li .a_img:hover .text{ display:block; text-decoration:none; text-align:center;}
.productshow .scrollcontainer ul li .a_img:hover{ border:6px solid #18a0e8; text-decoration:none;}





.aleft1{top:53px;right:-22px; background:url(../images/l_btn1.jpg) left no-repeat;}
.agrayleft1{cursor:default;background:url(../images/l_btn.jpg) left no-repeat;}
.aright1{right:-22px; top:30px;background:url(../images/r_btn.jpg) left no-repeat;}
.agrayright1{cursor:default;background:url(../images/r_btn1.jpg) left no-repeat;}

.productshow1{width:322px;height:164px;position:relative;}
.productshow1 .scrollcontainer1{width:322px;height:164px;overflow:hidden;position:relative;}
.productshow1 .scrollcontainer1 ul{width:20000px;position:absolute;}
.productshow1 .scrollcontainer1 li{float:left;width:161px;height:164px;}
.productshow1 .scrollcontainer1 li a img{width:132px;height:120px; border:2px solid #d7d7d7; padding:4px; background-color:#f1f1f1;}
.productshow1 .scrollcontainer1 li .text,.productshow1 .scrollcontainer1 li .text:hover{width:144px; height:32px; line-height:32px; text-align:center; color:#555555; overflow:hidden; border:0px;}



/*
<div class="productshow">
                        <div class="scrollcontainer">
                            <ul>
                                <li>
                                  <a href=""><img src="images/pic_001.jpg" /></a>  
                                </li>
                                <li>
                                  <a href=""><img src="images/pic_001.jpg" /></a>  
                                </li>
                                <li>
                                  <a href=""><img src="images/pic_001.jpg" /></a>  
                                </li>
                                <li>
                                  <a href=""><img src="images/pic_001.jpg" /></a>  
                                </li>
                                <li>
                                  <a href=""><img src="images/pic_001.jpg" /></a>  
                                </li>
                                <li>
                                  <a href=""><img src="images/pic_001.jpg" /></a>  
                                </li>
                                <li>
                                  <a href=""><img src="images/pic_001.jpg" /></a>  
                                </li>
                                <li>
                                  <a href=""><img src="images/pic_001.jpg" /></a>  
                                </li>
                                
                            </ul>
                        </div>
                        <a class="abtn aleft" href="#left">左移</a>
                        <a class="abtn aright" href="#right">右移</a>
                    </div>
					<script type="text/javascript" src="change_js/Xslider.js"></script>
					<script>
					   $(function(){
						   $(".productshow").Xslider({
							unitdisplayed:5,
							numtoMove:5,
							autoscroll:2000
							
						   });
						})
					</script>
					 
*/

/*------------------------------------------------end Effect5-----------------------------------------------------*/

/*------------------------------------------------start Effect6-----------------------------------------------------*/
/*6-左右滚动切换*/
#slider {
	position:absolute;
	top:0px;
	display:block;
	width:1000px;
	height:330px;
	z-index:3;
	overflow:hidden;
}
#slider img {
	width:1000px;
	height:330px;
}
.nivoSlider {
	position:absolute;
	width:1000px;
	height:330px;
	overflow: hidden;
}
.nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
	max-width: none;
}
.nivo-main-image {
	display: block !important;
	position: relative !important;
	width: 100% !important;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	border:0;
	padding:0;
	margin:0;
	z-index:6;
	display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
	display:block;
	position:absolute;
	z-index:5;
	height:100%;
	top:0;
}
.nivo-box {
	display:block;
	position:absolute;
	z-index:5;
	overflow:hidden;
}
.nivo-box img {
	display:block;
}
/* Caption styles */
.nivo-caption {
	position:absolute;
	left:0px;
	bottom:0px;
	background:#000;
	color:#fff;
	width:100%;
	z-index:8;
	padding: 5px 10px;
	opacity: 0.8;
	overflow: hidden;
	display: none;
	-moz-opacity: 0.8;
	filter:alpha(opacity=8);
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}
.nivo-caption p {
	padding:5px;
	margin:0;
}
.nivo-caption a {
	display:inline !important;
}
.nivo-html-caption {
	display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
	position:absolute;
	top:115px;
	display:block;
	text-indent:-9999px;
	z-index:9;
	height:76px;
	width:39px;
	cursor:pointer;
	/*background:url(../images/arrows.png) no-repeat;*/
}
.nivo-directionNav .nivo-prevNav {
	background:url(../images/left_btn.jpg) no-repeat;
	
	left:0px;
}
.nivo-directionNav .nivo-nextNav {
	background:url(../images/right_btn.jpg) no-repeat;
	right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
	position:absolute;
	width:1012px;
	display:block;
	background:url(../images/index_main_bg.png) -1px 0px no-repeat;
	height:46px;
	overflow:hidden;
	top:200px;
	left:0px;
	text-align:center;
	z-index:66;
}
.nivo-controlNav a {
	display:inline-block;
	background:url(../images/current.png) no-repeat;
	width:10px;
	height:11px;
	cursor:pointer;
	margin-right:3px;
	margin-top:3px;
}
.nivo-controlNav a.active {
	font-weight:bold;
	background:url(../images/current.png) -10px 0px no-repeat;
}
/*
<div id="slider" class="nivoSlider">
                            <a href=""><img src="images/pic_005.jpg" /></a>  
                            <a href=""><img src="images/pic_006.jpg"/></a>
                            <a href=""><img src="images/pic_005.jpg"/></a>
                            <a href=""><img src="images/pic_006.jpg"/></a>
                          </div>
						   <script type="text/javascript" src="change_js/jquery.easing.1.3.js"></script>
        <script type="text/javascript" src="change_js/jquery.nivo.slider.js"></script>
		$('#slider').nivoSlider();
*/

/*------------------------------------------------end Effect6-----------------------------------------------------*/

/*------------------------------------------------start Effect7-----------------------------------------------------*/

/*7-左右按钮滚动*/
.slides1_wrap {position: relative;width:820px;}
#slides1 {overflow: hidden;height:290px;}
#slides1 li{width: 820px;height:290px; float:left;}
#slides1 li .con_div{width:820px; height:290px;}
#slides1 li .con_div_t{width:820px; height:22px; line-height:22px; color:#454545;}
#slides1 li .con_div_time{width:820px; height:18px; line-height:18px; color:#b9b6b6;}
.slides1_wrap .prev {width:39px;position: absolute;left:-39px;top:0px;outline: 0;}
.slides1_wrap .next {width:44px;position: absolute;left:0px;top:0px;outline: 0;}
.slides1_wrap a:active {top: 0px;}
.bx_pager {position: absolute;top:-40px;left:387px;}
.bx_pager a {float:left;width:8px;height:8px; margin-right:12px; background-color:#959595;-moz-border-radius:4px;      /* Gecko browsers */
-webkit-border-radius: 4px;   /* Webkit browsers */
border-radius:4px;            /* W3C syntax */}
.bx_pager a:hover, .bx_pager a.active {text-decoration: none; background-color:#6c411d;}

/*
<ul id="slides2">
                <li>
                   <dl>
                      <dt>
                        <a href=""><img src="images/tb_pic.jpg"></a>
                      </dt>
                      <dd>
                        <a href=""><img src="images/pic_002.jpg"></a> 
                      </dd>
                      <dd>
                        <a href=""><img src="images/pic_002.jpg"></a> 
                      </dd>
                      <dd>
                        <a href=""><img src="images/pic_002.jpg"></a> 
                      </dd>
                      <dd>
                        <a href=""><img src="images/pic_002.jpg"></a> 
                      </dd>
                      <dd>
                        <a href=""><img src="images/pic_002.jpg"></a> 
                      </dd>
                      <dd>
                        <a href=""><img src="images/pic_002.jpg"></a> 
                      </dd>
                      
                   </dl>
                   
                </li>
                <li>
                   <dl>
                      <dt>
                        <a href=""><img src="images/tb_pic.jpg"></a>
                      </dt>
                      <dd>
                        <a href=""><img src="images/spzs_pic.jpg"></a> 
                      </dd>
                      <dd>
                        <a href=""><img src="images/spzs_pic.jpg"></a> 
                      </dd>
                      <dd>
                        <a href=""><img src="images/spzs_pic.jpg"></a> 
                      </dd>
                      <dd>
                        <a href=""><img src="images/spzs_pic.jpg"></a> 
                      </dd>
                      <dd>
                        <a href=""><img src="images/spzs_pic.jpg"></a> 
                      </dd>
                      <dd>
                        <a href=""><img src="images/spzs_pic.jpg"></a> 
                      </dd>
                      
                   </dl>
                </li>
               
                
           </ul>
		 <script src="slider/jquery.bxslider2.min.js" type="text/javascript"></script>
        <script src="slider/scripts.js" type="text/javascript"></script>
		*/
		
/*------------------------------------------------end Effect7-----------------------------------------------------*/

/*------------------------------------------------start banner8-----------------------------------------------------*/

/*8-左右滚动*/
.multipleColumn{ overflow:hidden; position:relative; width:1920px;}
.multipleColumn .hd1{ overflow:hidden;  height:25px;  }
/*.multipleColumn .hd1 .prev,.multipleColumn .hd1 .next{ display:block;  width:5px; height:9px; float:right; margin-right:5px; margin-top:10px;  overflow:hidden;cursor:pointer; background:url("images/icoLeft.gif") no-repeat;}*/
.multipleColumn .hd1 .prev{position:absolute; left:10%; top:0px; /*background:url(../images/l_btn.png) left center no-repeat; */width:80px; height:484px; cursor:pointer;}
.multipleColumn .hd1 .next{position:absolute; right:10%; top:0px;/*background:url(../images/r_btn.png) right center no-repeat; */width:80px; height:484px; cursor:pointer;}
	 
/*.multipleColumn .hd1 .next{ background:url("images/icoRight.gif") no-repeat;  }*/
.multipleColumn .hd1 ul{ margin:0px auto; overflow:hidden; zoom:1; height:25px;  zoom:1;width:55%; padding-left:45%;position:absolute; bottom:25px; left:0px; }
.multipleColumn .hd1 ul li{ float:left;  width:16px; height:16px; margin:0px 2px; overflow:hidden; text-indent:-999px; cursor:pointer; background:url(../images/y2.png) center no-repeat; }
.multipleColumn .hd1 ul li.on{ background:url(../images/y1.png) center no-repeat; }

.multipleColumn .bd{ overflow:hidden; height:449px; width:1920px;  }
.multipleColumn .bd ul{ overflow:hidden; zoom:1; width:1920px;  float:left; _display:inline; margin:0px auto; }
.multipleColumn .bd ul li{float:left; _display:inline; overflow:hidden; text-align:center; position:relative;  }
.multipleColumn .bd ul li .a_img{width:100%; display:inline-block; overflow:hidden;}
.multipleColumn .bd ul li .a_img img{width:1920px; height:449px;}



/*8-左右滚动*/
.multipleColumn1{ overflow:hidden; position:relative; width:1200px;}
.multipleColumn1 .hd1{ overflow:hidden;  height:25px;  }
.multipleColumn1 .hd1 .prev{position:absolute; left:10%; top:0px; width:80px; height:484px; cursor:pointer;}
.multipleColumn1 .hd1 .next{position:absolute; right:10%; top:0px;width:80px; height:484px; cursor:pointer;}
	 

.multipleColumn1 .hd1 ul{ margin:0px auto; overflow:hidden; zoom:1; height:25px;  zoom:1;width:60%; padding-left:40%;position:absolute; bottom:25px; left:0px; }
.multipleColumn1 .hd1 ul li{ float:left;  width:12px; height:12px; margin:0px 4px; overflow:hidden; text-indent:-999px; cursor:pointer; background-color:#fff;-moz-border-radius: 100%;      /* Gecko browsers */
-webkit-border-radius: 100%;   /* Webkit browsers */
border-radius:100%;            /* W3C syntax */ }
.multipleColumn1 .hd1 ul li.on{ background-color:#d81920; }
.multipleColumn1 .bd{ overflow:hidden; height:388px; width:1200px;  }
.multipleColumn1 .bd ul{ overflow:hidden; zoom:1; width:1200px;  float:left; _display:inline; margin:0px auto; }
.multipleColumn1 .bd ul li{float:left; _display:inline; overflow:hidden; text-align:center; position:relative;  }
.multipleColumn1 .bd ul li .div{width:1200px; background-color:#fff;}
.multipleColumn1 .bd ul li .div .a_img{width:616px; height:388px; display:inline-block; overflow:hidden;}
.multipleColumn1 .bd ul li .div .a_img img{width:616px; height:388px;}
.multipleColumn1 .bd ul li .div .a_img_r{width:515px; padding-right:35px;}
.multipleColumn1 .bd ul li .div .a_img_r .s1{width:100%; height:100px; line-height:100px; text-align:left; overflow:hidden; color:#333333; font-size:20px;}
.multipleColumn1 .bd ul li .div .a_img_r .s1:hover{ color:#d81920; text-decoration:none;}
.multipleColumn1 .bd ul li .div .a_img_r .s2{width:100%; height:88px; margin-bottom:22px; line-height:22px; text-align:left;  overflow:hidden; color:#666666; font-size:14px;}
.multipleColumn1 .bd ul li .div .a_img_r .s3{width:100%; height:35px; text-align:right; line-height:35px;}
.multipleColumn1 .bd ul li .div .a_img_r .s3 span{ height:35px; line-height:35px; padding-left:33px; color:#adadad; font-size:14px; background:url(../images/s61.png) left center no-repeat; display:inline-block;}
.multipleColumn1 .bd ul li .div .a_img_r .s4{ margin-top:22px; width:123px; height:38px; line-height:38px; border:1px solid #d2d2d2; text-align:center; display:inline-block; overflow:hidden; color:#333333; font-size:14px;-moz-border-radius: 19px;      /* Gecko browsers */
-webkit-border-radius: 19px;   /* Webkit browsers */
border-radius:19px;            /* W3C syntax */}
.multipleColumn1 .bd ul li .div .a_img_r .s4:hover{ border:1px solid #d81920; color:#d81920; text-decoration:none;}
.multipleColumn1 .pageState{ display:none;}



/*8-左右滚动*/
.multipleColumn2{ overflow:hidden; position:relative; width:1290px;}
.multipleColumn2 .hd1{ overflow:hidden;  height:25px;  }
.multipleColumn2 .hd1 .prev{position:absolute; left:0%; background:url(../images/cp_l.png) left center no-repeat; top:0px; width:21px; height:240px; cursor:pointer;}
.multipleColumn2 .hd1 .next{position:absolute; right:0%; background:url(../images/cp_r.png) right center no-repeat; top:0px;width:21px; height:240px; cursor:pointer;}
.multipleColumn2 .hd1 .prev:hover{ background:url(../images/cp_l1.png) left center no-repeat;}
.multipleColumn2 .hd1 .next:hover{ background:url(../images/cp_r1.png) right center no-repeat;}
	 

.multipleColumn2 .hd1 ul{ margin:0px auto; overflow:hidden; zoom:1; height:25px;  zoom:1;width:60%; padding-left:40%;position:absolute; bottom:25px; left:0px; }
.multipleColumn2 .hd1 ul li{ float:left;  width:12px; height:12px; margin:0px 4px; overflow:hidden; text-indent:-999px; cursor:pointer; }
.multipleColumn2 .hd1 ul li.on{ }
.multipleColumn2 .bd{ overflow:hidden; width:1290px; padding-left:30px;  }
.multipleColumn2 .bd ul{ overflow:hidden; zoom:1; width:1290px;  float:left; _display:inline; margin:0px auto; }
.multipleColumn2 .bd ul li{float:left; _display:inline; overflow:hidden; text-align:center; position:relative;  }
.multipleColumn2 .bd ul li dl{width:1230px;}
.multipleColumn2 .bd ul li dl dd{width:375px; height:296px; float:left; padding:0px 17.5px;}
.multipleColumn2 .bd ul li dl dd .a_img{width:375px; height:240px; display:inline-block; text-align:center; overflow:hidden;}
.multipleColumn2 .bd ul li dl dd .a_img img{width:375px; height:240px;}
.multipleColumn2 .bd ul li dl dd .a_text{width:375px; height:55px; line-height:55px; display:inline-block; overflow:hidden; text-align:center; color:#222222; font-size:18px;}
.multipleColumn2 .bd ul li dl dd .a_text:hover{ text-decoration:none; color:#d81920;}
.multipleColumn2 .pageState{ display:none;}





/*8-左右滚动*/
.multipleColumn3{ overflow:hidden; position:relative; width:710px;}
.multipleColumn3 .hd1{ overflow:hidden;  height:25px;  }
.multipleColumn3 .hd1 .prev{position:absolute; left:0%; top:0px; background:url(../images/zl_btn.png) left center no-repeat; width:36px; height:137px; cursor:pointer;}
.multipleColumn3 .hd1 .next{position:absolute; right:0%; top:0px;background:url(../images/zl_btn2.png) right center no-repeat;width:36px; height:137px; cursor:pointer;}
	 

.multipleColumn3 .hd1 ul{ margin:0px auto; overflow:hidden; zoom:1; height:25px;  zoom:1;width:60%; padding-left:40%;position:absolute; bottom:25px; left:0px; }
.multipleColumn3 .hd1 ul li{ float:left;  width:12px; height:12px; margin:0px 4px; overflow:hidden; text-indent:-999px; cursor:pointer; background-color:#fff;-moz-border-radius: 100%;      /* Gecko browsers */
-webkit-border-radius: 100%;   /* Webkit browsers */
border-radius:100%;            /* W3C syntax */ }
.multipleColumn3 .hd1 ul li.on{ background-color:#d81920; }
.multipleColumn3 .bd{ overflow:hidden;/* height:185px;*/ height:256px; width:664px; padding-left:46px;  }
.multipleColumn3 .bd ul{ overflow:hidden; zoom:1; width:664px;  float:left; _display:inline; margin:0px auto; }
.multipleColumn3 .bd ul li{float:left; _display:inline; overflow:hidden; text-align:center; position:relative;  }
.multipleColumn3 .bd ul li dl{width:100%;}
.multipleColumn3 .bd ul li dl dd{width:295px; height:208px; float:left; padding:0px 10px;}
.multipleColumn3 .bd ul li dl dd .a_img{width:295px; height:208px; display:inline-block; overflow:hidden;}
.multipleColumn3 .bd ul li dl dd .a_img img{width:295px; height:208px;}
/*.multipleColumn3 .bd ul li dl dd{width:194px; height:137px; float:left; padding:0px 8px;}
.multipleColumn3 .bd ul li dl dd .a_img{width:194px; height:137px; display:inline-block; overflow:hidden;}
.multipleColumn3 .bd ul li dl dd .a_img img{width:194px; height:137px;}*/
.multipleColumn3 .pageState{ display:none;}



/*8-左右滚动*/
.multipleColumn4{ overflow:hidden; position:relative; width:1200px;}
.multipleColumn4 .hd1{ overflow:hidden;  height:25px;  }
.multipleColumn4 .hd1 .prev{position:absolute; left:0%; top:30px; background:url(../images/zf_01.png) left center no-repeat; width:7px; height:13px; cursor:pointer;}
.multipleColumn4 .hd1 .next{position:absolute; right:0%;  top:30px;background:url(../images/zs_02.png) right center no-repeat;width:7px; height:13px; cursor:pointer;}
	 

.multipleColumn4 .hd1 ul{ margin:0px auto; overflow:hidden; zoom:1; height:25px;  zoom:1;width:60%; padding-left:40%;position:absolute; bottom:0px; left:0px; }
.multipleColumn4 .hd1 ul li{ float:left;  width:12px; height:12px; margin:0px 4px; overflow:hidden; text-indent:-999px; cursor:pointer;  }
.multipleColumn4 .hd1 ul li.on{ }
.multipleColumn4 .bd{ overflow:hidden;width:1200px; }
.multipleColumn4 .bd ul{ overflow:hidden; zoom:1; width:950px;  float:left; _display:inline; margin:0px auto; }
.multipleColumn4 .bd ul li{float:left; _display:inline; overflow:hidden; text-align:center; position:relative;width:950px; margin-left:125px;  }
.multipleColumn4 .bd ul li .div{width:100%; height:40px; text-align:center;}
.multipleColumn4 .bd ul li .div a{width:90px; height:40px; line-height:29px; background:url(../images/zs_03.png) bottom center no-repeat; display:inline-block; overflow:hidden; text-align:center; color:#888888; font-size:16px;}
.multipleColumn4 .bd ul li .div a:hover,.multipleColumn4 .bd ul li .div a.activefydh{ color:#d81920; text-decoration:none;}
.multipleColumn4 .pageState{ display:none;}



/*<div class="multipleColumn" style="margin:0 auto">
    <div class="bd">
     <div class="ulWrap">
        <ul>
            <li>
              <div class="pic"><a href=""><img src="images/banner.jpg" /></a></div>
             </li>
             <li>
               <div class="pic"><a href=""><img src="images/banner1.jpg" /></a></div>
              </li>
              <li>
                <div class="pic"><a href=""><img src="images/banner.jpg" /></a></div>
               </li>
               <li>
                  <div class="pic"><a href=""><img src="images/banner1.jpg" /></a></div>
               </li>      
          </ul>                             
       </div>
      </div>
      <div class="hd1">
           <a class="next"></a>
           <ul></ul>
           <a class="prev"></a>
           <span class="pageState"></span>
      </div>
       </div>
       <script type="text/javascript" src="change_js/jquery.SuperSlide.2.1.1.js"></script>
		<script type="text/javascript">
        
           // 多行/多列的滚动解决思路在于：把每次滚动的n个li放到1个ul里面，然后用SuperSlide每次滚动1个ul，相当于每次滚动n个li
          jQuery(".multipleColumn").slide({titCell:".hd1 ul",mainCell:".bd ul",autoPage:true,effect:"left",autoPlay:true,vis:1,trigger:"click",scroll:1});
       </script>*/
		
/*------------------------------------------------end banner8-----------------------------------------------------*/